<html lang="en">
  <head>
    <link href="static/css/main.css" rel="stylesheet" type="text/css" media="all">
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/ol.min.js" type="text/javascript"></script>

    <style>
      .mapcontainer {
        position: relative;
      }
      .map {
        margin: 0 auto;
        height: 600px;
        width: 90%;
      }
    </style>


  </head>

  <body>

    <div class="header">

      <h1>Tweet Heatmap</h1><h3>(Loklak.org as a source)</h3>
      <div class="box">
        <input type="text" name="search" id="search" placeholder="Search term" onChange="updateMap();" required/>
      </div>

    </div>

    <h2 id="loadin">Loading data...</h2>
    <div id="map" class="map"></div>
    <h5 style="text-align:center;">Check <a href="https://github.com/fossasia/loklak_heatmap">this Project</a> on Github</h5>

  </body>

  <script type="text/javascript">
    $("#loadin").hide();
    var value = "";
    var map = new ol.Map({
    target: 'map',
      controls: [],
      interactions: [],
      layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
      ],
    view: new ol.View({
      center: ol.proj.fromLonLat([0, 0]),
      zoom: 1.9})
    });

    function updateMap(){
      var query = document.getElementById('search').value;
      if(query!='' || query!=' ' || query!=null || query!=value){
        renderTweets(query);
      }
      value = query;
    }

    function renderTweets(query){
      $("#loadin").show();
      $.getJSON("/search?q="+query, function(data){
        layerData = new ol.source.Vector();
        for(i=0; i<data.length; i++){
          var coord = new ol.geom.Point(ol.proj.transform([data[i][0], data[i][1]], 'EPSG:4326', 'EPSG:3857'));
          var pointFt = new ol.Feature({
            geometry: coord,
            weight: 0.5
          });
          layerData.addFeature(pointFt);
          heatLayer = new ol.layer.Heatmap({
            source: layerData,
            radius: 1});
          map.addLayer(heatLayer);
        }
        $("#loadin").hide();
      });
      return 0;
    }
  </script>
</html>
